<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>123-ionicons小图标</title>
    <script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <style>
      ion-icon {
        font-size: 64px;
      }
      .box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      .icon_box {
        margin: 16px;
        display: flex;
        cursor: pointer;
        flex-direction: column;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <p>
      <a href="https://ionic.io/ionicons" target="_blank">更多图标参见 ionicons</a>
    </p>
    <div id="iconMax"></div>
    <script>
      const icons = [
        'search-outline',
        'close-outline',
        'search-outline',
        'close-outline',
        'accessibility-outline',
        'add-outline',
        'add-circle-outline',

        'search',
        'close',
        'search',
        'close',
        'accessibility',
        'add',
        'add-circle',

        'search-sharp',
        'close-sharp',
        'search-sharp',
        'close-sharp',
        'accessibility-sharp',
        'add-sharp',
        'add-circle-sharp'
      ]

      const iconMax = document.getElementById('iconMax')
      iconMax.innerHTML = icons.reduce((p, c) => {
        p += `
        <div class="icon_box">
          <ion-icon name="${c}"></ion-icon>
          <p>${c}</p>
        </div>
        `
        return p
      }, '')
    </script>
  </body>
</html>
